<template>
  <div class="cu-button">
    <button :class="type" @click.stop="handleClick" :style="{ width: width + 'px', height: height + 'px', lineHeight: height - 2 + 'px' }">
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: "CuButton",
  props: {
    width: {
      type: Number,
      default: 113,
    },
    height: {
      type: Number,
      default: 34,
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="less" scoped>
.cu-button {
  button {
    background: #fb7924;
    border-radius: 4px;
    color: #fff;
    border: none;
    outline: none;
    &:active {
      background: #e27e20 !important;
    }
    &:focus {
      outline: none !important;
    }
    &.default {
      background: #fff;
      border: 1px solid #e8e8e8;
      color: #595959;
      &:active {
        background: #eee !important;
      }
    }
  }
}
</style>
